import { getHospitalSetList } from '../../../../src/api/hospital/hospitalSet'
import { IHospitalSetList } from '../../../../src/api/hospital/model/hospitalSetTypes'
import { Button, Card, Form, Input, Space, Table } from 'antd'
import {EditOutlined,DeleteOutlined} from '@ant-design/icons'
import { ColumnsType  } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
export default function HospitalSet() {
    const navigate = useNavigate()
    const columns:ColumnsType<any> = [
        {
            title:'序号',
            width:60,
            align:'center',
            render(value:any,row:any, index:number){
                return (current - 1) * pageSize + (index + 1)
            }
        },
        {
            title:'医院名称',
            dataIndex:'hosname'
        },
        {
            title:'医院编号',
            dataIndex:'hoscode'
        },
        {
            title:'api基础路径',
            dataIndex:'apiUrl'
        },
        {
            title:'签名',
            dataIndex:'signKey'
        },
        {
            title:'联系人姓名',
            dataIndex:'contactsName'
        },
        {
            title:'联系人手机',
            dataIndex:'contactsPhone'
        },
        {
            title:'操作',
            width:120,
            fixed:'right',
            render(row:any){
                return (
                    <Space>
                        <Button type='primary' icon={<EditOutlined />}></Button>
                        <Button type='primary' icon={<DeleteOutlined />} danger></Button>
                    </Space>
                )
            }
        }
    ]
    // 声明状态
    // 分页相关状态
    let [current, setCurrent] = useState<number>(1);
    let [pageSize, setPageSize] = useState<number>(3);
    let [total, setTotal] = useState<number>(10);
    // 医院设置列表类型
    let [hospitalSetList, setHospitalSetList] = useState<IHospitalSetList>([]);
    let [hosname, setHosname] = useState<string>();
    let [hoscode, setHoscode] = useState<string>();
    // loading
    let [loading, setLoading] = useState<boolean>(false);

    const [form] = Form.useForm();
    // componentDidMount 完成首屏数据渲染
    async function _getHospitalSetList(){
        setLoading(true);
        let {records, total} = await getHospitalSetList(current, pageSize,hosname,hoscode);
        // 设置状态
        setHospitalSetList(records);
        setTotal(total);
        setLoading(false);
    }
    const search = ()=>{
        //1 获取最新的 hosname 和 hoscode，重新设置他们的状态
        console.log('123123');
        console.log(form.getFieldsValue());
        let {hosname, hoscode} = form.getFieldsValue();
        setHosname(hosname);
        setHoscode(hoscode);
        // 检索从第一页开始查看
        current !== 1 && setCurrent(1);
    }
    const clear = ()=>{
        // 1. 重置表单 hosname 和 hoscode ==>界面
        // 2. 重置 状态 hosname 和 hoscode  ===> 重发请求的
        form.resetFields();
        setHosname(undefined);
        setHoscode(undefined);
        setCurrent(1);
    }
    useEffect(()=>{
        _getHospitalSetList();
    }, [current, pageSize, hosname, hoscode])
    return (
        <Card>
            {/* 1. Form */}
            <Form
                layout='inline'
                onFinish={search}
                form={form}
            >
                <Form.Item name="hosname">
                    <Input placeholder='医院名称' />
                </Form.Item>
                <Form.Item name="hoscode">
                    <Input placeholder='医院编号' />
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type='primary' htmlType='submit'>查询</Button>
                        <Button onClick={clear} disabled={hosname===undefined && hoscode===undefined}>清空</Button>
                    </Space>
                </Form.Item>
            </Form>
            {/* 2. button */}
            <Space className='mt'>
                <Button type='primary' onClick={()=>navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
                <Button disabled>批量删除</Button>
            </Space>
            {/* 3. Table */}
            <Table 
                loading={loading}
                className='mt'
                rowKey={'id'}
                columns={columns}
                dataSource={hospitalSetList}
                scroll={{x:1300}}
                pagination={{
                    current,
                    pageSize,
                    total,
                    showQuickJumper:true,
                    showSizeChanger:true,
                    pageSizeOptions:[3,5,10,20],
                    onChange:(page:number, pageSize:number)=>{
                        setCurrent(page);
                        setPageSize(pageSize)
                    }
                }}
            />
        </Card>
    )
}
